<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Raspberry Pi Video</title>
<style>
body {
	margin: 0;
	padding: 0;
	font: 12px/1.5 arial;
	text-align:center;
	height:100%;
	width:100%;
}
img {
	max-width: 100%;
	max-height: 100%;
	margin:2px;
	border-radius: 6px;
}
a {
	text-decoration:none;
}
#header {
	background-color:black;
	color:white;
	margin:2% 0 0 0;
	padding:5px;
}
#section {
	width:80%;
	margin:0 auto;
	padding:10px;
}
#footer {
	background-color:black;
	font-size:medium;
	color:white;
	clear:both;
	padding:5px;
	position: fixed;
	bottom:0;
	min-width:100%;
}
#counter {
	position:absolute;
	max-height: 50%;
	max-width:50%;
	right: 5%;
	border: 0;
}
</style>
<script>
function updateFrame()
{
    var delay_time = 100;  // 延时时间100ms
    var now_time = Math.round((new Date() - delay_time) / 100);     // 百毫秒级时间戳
    var path = "frame" + now_time + ".png";
    // alert(path);
    var bufferImage = new Image();                   //缓冲图片
    bufferImage.src = path;
    document.getElementById("frame").src=bufferImage.src;
    setTimeout(updateFrame, 100);
}
</script>
</head>

<body onload="updateFrame()">
<div id="header">
	<h1>Raspberry Pi Video</h1>
</div>
<div id="section">
	<img src="" id="frame">
</div>
<br/><br/><br/>
<div id="footer">
	© 2018.08.23 HaydnLiao
</div>
</body>
</html>

